<template>
  <div class="upload_avatar">
    <!-- 使用数据库中的base64位图片 -->
    <div class="img" @click="dialogVisible = true">
      <el-avatar class="avatar" :size="100" :src="userInfo.avatar" @click="dialogVisible = true" :icon="UserFilled"/>
      <div class="mask">
        <img src="@/assets/img/download.png" alt="">
      </div>
    </div>
  </div>

  <!-- 修改头像对话框 -->
  <el-dialog
    v-model="dialogVisible" 
    :title="!uploadForm.base64? '上传头像' : '头像预览'" 
    width="40%"  
    draggable
    @close="handleDialogClose"
  >
    <!-- 上传头像 -->
    <div v-if="!uploadForm.base64">
      <el-upload
        class="upload-demo"
        drag
        :before-upload="handleUpload"
        :show-file-list=false
        action="http://localhost:8000"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          拖拽头像图片或者 <em>点击上传</em>
        </div>
        <template #tip>
          <div class="el-upload__tip">
            上传头像图片仅支持 JPG/PNG/GIF 格式，大小不能超过 2MB
          </div>
        </template>
      </el-upload>
    </div>
    <!-- 头像预览 -->
    <div v-else class="preview">
      <div class="preview-img">
        <el-avatar :size="200" :src="uploadForm.base64"/>
      </div>
    </div>
    <!-- 底部功能按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button  @click="handleDialogClose">取消</el-button>
        <el-button v-if="uploadForm.base64" type="info" plain @click="uploadForm.base64=''">上一步</el-button>
        <el-button v-if="uploadForm.base64" type="danger" @click="uplaodAvatar">
          上传并保存
          <el-icon class="el-icon--right"><Upload /></el-icon>
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, computed } from 'vue';
import { useStore } from 'vuex'
import { binMsg } from '@/global/api.js';
import { UploadFilled, Upload, UserFilled } from '@element-plus/icons-vue'

const store = useStore()
const dialogVisible = ref(false)
// 获取仓库中的用户信息
const userInfo = computed(() => store.state.userModule.userInfo)
// 上传的表单
const uploadForm = reactive({
  id: userInfo.value.id,
  base64: ''
})

// 对话框关闭
const handleDialogClose = () =>{
  dialogVisible.value = false
  uploadForm.base64 = ''
}

// 选择头像后的事件
const handleUpload = (file) => {
  let type = file.type ==='image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
  if (!type) {
    return binMsg('warning', '上传头像图片仅支持 JPG/PNG/GIF 格式！')
  }
  // 2,621,440 -> 2M
  if (file.size > 2101440) {
    return binMsg('warning', '头像图片大小不能超过 2 MB！')
  }
  // 读取文件流
  let reader = new FileReader();
  reader.readAsDataURL(file);
  reader.onload = async (e)=> {
    // 读取到的图片base64 数据编码 将此编码字符串传给后台即可
    uploadForm.base64 = e.target.result;
  }
}

// 上传头像，发起请求保存头像（更新完头像要重新获取最新用户信息，存入store中）
const uplaodAvatar = async () => {
  store.dispatch('userModule/updateAvatarAction', {role: userInfo.value.role, uploadForm})
  dialogVisible.value = false
  uploadForm.base64 = ''
}

</script>

<style lang="less" scoped>
.upload_avatar {
  width: 100%;
  height: 100%;
}

.img {
  position: relative;
  width: 100px;
  height: 100px;
  transition: all .5s;
  margin: 0 auto;
  user-select: none;

}

.img:hover {
  cursor: pointer;
}

.img:hover .mask{
  display: block;
}

.avatar {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.mask {
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  border-radius: 50%;
  transition: all .5s;

}

.mask img {
  width: 35px;
  height: 35px;
  padding: 32px;
}

.preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  .preview-img {
    width: 200px;
    height: 200px;
    border-radius: 50%;
  }
}

</style>